<template>
	<view class="userInfo">
		<image :src="obj.pic1" mode="" class="avatar"></image>
		<view class="username">
			{{obj.username}}
		</view> 
	</view>  
</template>  

<script lang="ts" setup>
	import { computed } from 'vue';
	defineProps({
		obj:{
			type:Object,
			default(){
				return {
					username:'匿名',
					pic1:'../../static/logo.png'
				}
			}
		}
	})
	// const props =  defineProps(['username'])
	// const props = defineProps({
	// 	username:{
	// 		type:String,
	// 		default:'匿名'
	// 	},
	// 	pic:{
	// 		type:String,
	// 		default:'../../static/logo.png'
	// 	}
	// })
	// const newName = computed(()=>props.username+ '@')
</script> 

<style lang="scss" scoped>
	.userInfo{
		width: 100%;
		height: 200px;
		background-color: #ccc;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		image{
			width: 100px;
			height: 100px;
			border-radius: 20px;
		}
		.username{
			padding: 10px 0;
			font-size: 20px;
		}
	}
	.ipt{
		height: 30px;
		background-color: #ccc;
		padding: 0 10px;
		box-sizing: border-box;
	}
</style>